<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <title>Autodesk Forge Viewer Node.js Extractor example</title>
    <meta content="Extractor example" name="description" />
    <meta content="Extractor Node.js Forge Viewer" name="keywords" />
    <meta content="Autodesk" name="author" />
    <link href="../favicon.ico" rel="shortcut icon" />

	<!-- icons-->
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script src="/bower_components/jquery/dist/jquery.js"></script>
	<link href="/bower_components/jquery-ui/themes/smoothness/jquery-ui.css" rel="stylesheet">
	<script src="/bower_components/jquery-ui/jquery-ui.js"></script>
	<link href="/css/ionicons.css" rel="stylesheet" />
	<link href="/css/maria-theme-checkbox.css" rel="stylesheet" />
	<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
	<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<link href="/css/maria-base-theme.css" rel="stylesheet" />
	<link href="/css/maria-theme.css" rel="stylesheet" />
	<!--link href="/css/open-sans.css" rel="stylesheet" /-->
	<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
	<link href="/css/custom.css" rel="stylesheet" />
	<link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet" />
	<script src="//www.fuelcdn.com/fuelux/3.12.0/js/fuelux.min.js"></script>

	<script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>

	<!-- Autodesk Forge Viewer -->
	<link href="https://developer.api.autodesk.com/derivativeservice/v2/viewers/style.min.css?v=v<%= version %>" rel="stylesheet" />
	<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js?v=v<%= version %>"></script>
	<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.min.js?v=v<%= version %>"></script>
	<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/wgs.min.js?v=v<%= version %>"></script>

	<!-- Our scripts -->
	<style>
		div#viewer { width: auto; height: 700px; cursor: pointer; padding: 0px; margin-bottom: 20px;
			position: relative; overflow: hidden; border: 2px dashed #aaa; border-radius: 10px; }

		div.docking-panel { top: 0px; left: 0px; width: 305px; height: 250px; resize: none; }
		div.docking-panel-minimized { height: 34px; min-height: 34px }

		div#extract\.autodesk\.io-extract-panel.docking-panel { top: 0px; left: 0px; width: 550px; height: 325px; resize: none; }
		div#extract\.autodesk\.io-extract-panel.docking-panel input#bubbles-email { width: 100%; }
		div#extract\.autodesk\.io-extract-panel.docking-panel progress { width: 100%; }
		div#extract\.autodesk\.io-extract-panel.docking-panel #bubbles-uri { color: white; }
		div#extract\.autodesk\.io-extract-panel.docking-panel h6,
		div#extract\.autodesk\.io-extract-panel.docking-panel div { color: white; }
		input:required:invalid,
		input:focus:invalid {
			background-image: url();
			background-position: right top;
			background-repeat: no-repeat;
			-moz-box-shadow: none;
		}
		input:required:valid {
			background-image: url();
			background-position: right top;
			background-repeat: no-repeat;
		}

		label { color: white; }

		div.modal .panel-heading { border-top-left-radius: inherit; border-top-right-radius: inherit; }

		/* http://jsfiddle.net/rensdenobel/sRmLV/13/ */
		.vertical-alignment-helper {
			display:table;
			height: 100%;
			width: 100%;
		}
		.vertical-align-center {
			/* To center vertically */
			display: table-cell;
			vertical-align: middle;
		}
		.modal-content {
			/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
			width:inherit;
			height:inherit;
			/* To center horizontally */
			margin: 0 auto;
		}

	</style>
	<script>
		$(document).ready (function () {
			initializeAutodeskViewer () ;

			$('#help-information').click (function (evt) {
				evt.stopPropagation () ;
				$('#HelpMsg').modal () ;
			}) ;
		}) ;

		// https://developer.autodesk.com/en/docs/viewer/v2/tutorials/basic-viewer/
        var oExtracted =<%= extracted %> ;
        var urn ='<%= urn %>' ;
        //function getAccessToken (onGetAccessToken) {
        //    onGetAccessToken ('your access token', 83000) ;
        //}

		var oDocument =null, oViewer =null ;
		var oViewables =null, oViews3D =null, oViews2D =null, oViewsCtrl =null, oViewsPanel =null ;
		var oExtractPanel =null ;

		function initializeAutodeskViewer () {
			var options ={ /*'getAccessToken': getAccessToken,*/ 'env': 'AutodeskProduction' /*, 'accessToken': '' */ } ;
			Autodesk.Viewing.Initializer (options, loadModel) ;
		}

		function loadModel () {
			var pattern =/^(urn|https?):.*$/g ;
			if ( !pattern.test (urn) )
				urn ='urn:' + urn ;
			pattern =/^(urn):.*$/g ;

			if ( Autodesk.Viewing.endpoint && Autodesk.Viewing.endpoint.setEndpointAndApi )
				Autodesk.Viewing.endpoint.setEndpointAndApi (window.location.origin + '/forge-proxy', 'modelDerivativeV2') ;
			else if ( Autodesk.Viewing.setApiEndpoint )
				Autodesk.Viewing.setApiEndpoint (window.location.origin + '/forge-proxy') ;
			else if ( Autodesk.Viewing.setEndpointAndApi )
				Autodesk.Viewing.setEndpointAndApi (window.location.origin + '/forge-proxy', 'modelDerivativeV2') ;

			if ( pattern.test (urn) )
				Autodesk.Viewing.Document.load (urn, onDocumentLoaded, onError) ;
			else
				startViewer (urn, urn.replace (/[^\/]*$/, '')) ;
		}

        function onDocumentLoaded (doc) {
			oDocument =doc ;
			// Get all the 3D and 2D views (but keep in separate arrays so we can differentiate in the UI)
			oViews3D =Autodesk.Viewing.Document.getSubItemsWithProperties (doc.getRootItem (), { 'type': 'geometry', 'role': '3d' }, true) ;
			oViews2D =Autodesk.Viewing.Document.getSubItemsWithProperties (doc.getRootItem (), { 'type': 'geometry', 'role': '2d' }, true) ;
			// Load up first a 3D view by default
			var viewable =null ;
			if ( oViews3D.length > 0 )
				viewable =oViews3D [0] ;
			else if ( oViews2D.length > 0 )
				viewable =oViews2D [0] ;
			else
				return (alert ('ERROR: No 3D or 2D views found in this document!')) ;

			startViewer (doc.getViewablePath (viewable), doc.getPropertyDbPath ()) ;
        }

		function startViewer (svfUrl, sharedPropertyDbPath) {
			if ( oViewer )
				return (loadModelInViewer (svfUrl, sharedPropertyDbPath)) ;

			var modelOptions ={ sharedPropertyDbPath: sharedPropertyDbPath } ;
			oViewer =new Autodesk.Viewing.Private.GuiViewer3D ($("#viewer") [0]) ;
			//var pattern =/^(urn):.*$/g ;
			//if ( pattern.test (urn) ) {
				oViewer.start (svfUrl, modelOptions, onModelLoaded, onError) ;
			//} else {
			//    oViewer.initialize () ;
			//    oViewer.loadModel (svfUrl, modelOptions, onModelLoaded, onError) ;
			//}
			oViewer.addEventListener (Autodesk.Viewing.TOOLBAR_CREATED_EVENT, onViewerToolbarCreated) ;
			oViewer.addEventListener (Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onViewerGeometryLoaded) ;
		}

		function loadModelInViewer (svfUrl, sharedPropertyDbPath) {
			oViewer.tearDown () ;
			oViewer.setUp (oViewer.config) ;
			var modelOptions ={ sharedPropertyDbPath: sharedPropertyDbPath } ;
			oViewer.loadModel (svfUrl, modelOptions, onModelLoaded, onError) ;
		}

		function onModelLoaded (model) {
			fillViewsList () ;
			oExtractPanel =createExtractPanel (true) ;
		}

		function onError (viewerErrorCode, message) {
			var elt =$('#LoadingError div.modal-body') ;
			elt.text ('Viewer Error #' + viewerErrorCode) ;
			var ul =$(document.createElement ('ul')).appendTo (elt) ;
			//$.each (messages, function (index, item) {
				$(document.createElement ('li'))
					.text (message)
					.appendTo (ul) ;
			//}) ;
			$('#LoadingError').modal () ;
		}

        function onViewerToolbarCreated () {
            oViewer.removeEventListener (Autodesk.Viewing.TOOLBAR_CREATED_EVENT, onViewerToolbarCreated) ;
            createButton (
                'extractIO.DangerZone', 'extractIO.Delete',
                'url(/images/delete.24x24.png)', 'DANGER ZONE - Delete this project',
                function (evt) {
                    evt.stopPropagation () ;
                    if ( confirm ('Are you sure you want to delete that project?') ) {
                        $.ajax ({
                            url: '/api/results/<%= root %>',
                            type: 'delete',
                            complete: null
                        }).done (function (results) {
                            window.close () ;
	                        console.log (results) ;
                        }).fail (function (error) {
							console.error (error) ;
						}) ;
                    }
				}
            ) ;
            createButton (
                'extractIO.ExtractZone', 'extractIO.Extract',
                'url(/images/bubbles.png)', 'Extract this project',
                function (evt) {
                    evt.stopPropagation () ;
                    oExtractPanel.toggleVisibility () ;
                }
            ) ;
            oViewsCtrl =createComboButton (
                'extractIO.ExtractZone', 'extractIO.Views',
                'url(/images/views.png)', 'Select a 2D/3D view to load in the viewer'
            ) ;
	        fillViewsList () ;
        }

        function onViewerGeometryLoaded () {
            oViewer.removeEventListener (Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onViewerGeometryLoaded) ;
            oViewer.fitToView (true) ;
            setTimeout (function () { oViewer.autocam.setHomeViewFrom (oViewer.navigation.getCamera ()) ; }, 1000) ;
        }

        function fillViewsList () {
            if ( oViewsCtrl == null || oViewsCtrl.initialized || oViews2D == null || oViews3D == null )
                return ;
	        oViewsCtrl.initialized =true ;
	        var viewsctrl =oViewsCtrl.combo ;
	        var nb =oViews2D.length + oViews3D.length ;
	        if ( nb > 12 ) {
		        oViewsPanel =createSubViewsPanel (false) ;
		        viewsctrl =oViewsPanel ;
		        oViewsCtrl.combo.onClick =$.proxy (oViewsPanel.toggleVisibility, oViewsPanel) ;
	        }
	        $.each (oViews2D, function (index, view) {
		        var ctrl =createButton (
			        viewsctrl, 'extractIO.2dViews' + index,
			        'url(/images/2d.png)', getName (view),
			        onLoadSubViews
		        ) ;
		        ctrl.button.view =view ;
	        }) ;
	        $.each (oViews3D, function (index, view) {
		        var ctrl =createButton (
			        viewsctrl, 'extractIO.3dViews' + index,
			        'url(/images/3d.png)', getName (view),
			        onLoadSubViews
		        ) ;
		        ctrl.button.view =view ;
	        }) ;
        }

        function onLoadSubViews (evt) {
            evt.stopPropagation () ;
            var id =$(evt.target).parent ().parent ().parent ().parent ().prop ('id') ;
            var viewerToolbar =oViewer.getToolbar (true) ;
            var grp =viewerToolbar.getControl (id) ;
            id =$(evt.target).parent ().prop ('id') ;
            var ctrl =(grp === null ? oViewsPanel._controls [id] : grp.getControl ('extractIO.Views').subMenu.getControl (id)) ;
            var path =oDocument.getViewablePath (ctrl.view) ;
            oViewer.impl.unloadCurrentModel () ;
            // API would be tearDown()/setUp()
            // tearDown() unloads extensions too, so you need setUp() after that to load again
            // setUp() requires the viewer configuration again, the one you use to start the viewer.
            oViewer.load (path, oDocument.getPropertyDbPath ()) ;
        }

        function getName (value) {
            if ( value.name !== undefined )
                return (value.name) ;
            else if ( value.role !== undefined && value.urn !== undefined )
                return (value.urn.split ('/').pop ()) ;
            return ('?') ;
        }

        function _createControlGroup (groupName) {
            var viewerToolbar =oViewer.getToolbar (true) ;
            if ( viewerToolbar.getControl (groupName) )
                return (viewerToolbar.getControl (groupName)) ;
            var ctrlGroup =new Autodesk.Viewing.UI.ControlGroup (groupName) ;
            viewerToolbar.addControl (ctrlGroup) ;
            return (ctrlGroup) ;
        }

        function _createButton (id, imgUrl, tooltip, handler) {
            var button =new Autodesk.Viewing.UI.Button (id) ;
            button.icon.style.backgroundImage =imgUrl ;
            button.setToolTip (tooltip) ;
            button.onClick =handler ;
            return (button) ;
        }

        function createButton (groupNameOrCtrl, id, img, tooltip, handler, index) {
            var ctrlGroup =typeof groupNameOrCtrl === 'string' ?
                  _createControlGroup (groupNameOrCtrl)
                : groupNameOrCtrl ;
            var button =_createButton (id, img, tooltip, handler) ;
            ctrlGroup.addControl (button, { 'index': (index || 1) }) ;
            return ({ 'group': ctrlGroup, 'button': button }) ;
        }

        function createComboButton (groupNameOrCtrl, id, img, tooltip, handler, index) {
            var ctrlGroup =typeof groupNameOrCtrl === 'string' ?
                  _createControlGroup (groupNameOrCtrl)
                : groupNameOrCtrl ;
            var combo =new Autodesk.Viewing.UI.ComboButton (id) ;
            combo.setToolTip (tooltip) ;
            combo.icon.style.backgroundImage =img ;
            if ( handler )
                combo.onClick =handler ;
            ctrlGroup.addControl (combo, { 'index': (index || 1) }) ;
            return ({ 'group': ctrlGroup, 'combo': combo }) ;
        }

        function createSubViewsPanel (show) {
            show =show || false ;
            var panel =new Panel (oViewer.container, 'extract.autodesk.io-subviews-panel', 'Sub Views') ;
            panel.setVisible (show) ;
            return (panel) ;
        }

        function createExtractPanel (show) {
            show =show || false ;
            var panel =new Panel (oViewer.container, 'extract.autodesk.io-extract-panel', 'Extract this model') ;
            panel.setVisible (show) ;

            var html =[
                '<div class="modal-body">',
                '<div class="control-group list-group">',
                    '<label class="control-label" for="bubbles-email">Notify me at this email address when the bubbles are ready (optional)</label>',
                    '<div class="controls">',
                        '<input type="email" id="bubbles-email" name="bubbles-email" required placeholder="Enter a valid email address">',
                    '</div>',
                    '<div id="bubbles-uri">if you prefer to wait, the url to download the bubbles will appear here when ready</div>',

		            '<br />',
		            '<div><h6>Options</h6></div>',
					'<div><input id="opts_sqllite" type="checkbox" /> Include SQLite DB (could be large)</div>',
					'<div><input id="opts_viewer_files" type="checkbox" /> Include Viewer files</div>',

                    '<br />',
                    '<div class="controls">',
                        '<button type="button" id="bubbles-proceed" class="btn btn-info">Proceed</button>',
                    '</div>',
                    '<div class="controls flow-file-progress alert">',
                        '<progress id="bubbles-progress" min="0" max="100" value="0" class="jquery" />',
                    '</div>',
                '</div>',
                '</div>'
            ].join ('') ;
            var elt =$(html) ;

            panel.addHtmlElement (elt) ;
            $(panel.container).css ('resize', 'none') ;

            $('#opts_sqllite').click (function (evt) {
                $('#bubbles-uri').empty () ;
                $('#bubbles-uri').text ('if you prefer to wait, the url to download the bubbles will appear here when ready') ;
                $('#bubbles-progress').val (0) ;
            }) ;
            $('#opts_viewer_files').click (function (evt) {
                $('#bubbles-uri').empty () ;
                $('#bubbles-uri').text ('if you prefer to wait, the url to download the bubbles will appear here when ready') ;
                $('#bubbles-progress').val (0) ;
            }) ;

            $('#bubbles-proceed').click (function (evt) {
                var email =$('#bubbles-email').val ().trim () ;
				var opts_sqllite =$('#opts_sqllite').prop ('checked') ;
				var opts_viewer_files =$('#opts_viewer_files').prop ('checked') ;
                $.ajax ({
                    url: '/api/results/<%= root %>/project',
                    type: 'get',
                    data: { email: email, sqllite: opts_sqllite, viewer_files: opts_viewer_files },
                    complete: null
                }).done (function (results) {
                    setTimeout (function () { extractionProgress () ; }, 1000) ;
                }).fail (function (error) {
	                console.error (error) ;
                }) ;
            }) ;
            return (panel) ;
        }

        function extractionProgress () {
            $.ajax ({
                url: '/api/results/<%= root %>/project/progress',
                type: 'get',
                //data: null,
                complete: null
            }).done (function (results) {
	            $('#bubbles-progress').val (parseInt (results._progress)) ;
                $('#bubbles-uri').empty ().text (results.msg) ;
                if ( results.msg !== 'Completed' ) {
	                setTimeout (function () { extractionProgress () ; }, 1000) ;
                } else {
                    $('#bubbles-uri').empty () ;
                    var ref ='/extracted/zips/<%= root %>' ;
                    var params =[] ;
                    var opts_sqllite =$('#opts_sqllite').prop ('checked') ;
                    if ( opts_sqllite === true )
                        params.push ('db=true') ;
				    var opts_viewer_files =$('#opts_viewer_files').prop ('checked') ;
                    if  ( opts_viewer_files === true )
                        params.push ('viewer=true') ;
                    if ( params.length > 0 )
                        ref +='?' + params.join ('&') ;
                    $(document.createElement ('a'))
                        .prop ('href', ref)
                        .text ('<%= root %>.zip')
                        .appendTo ($('#bubbles-uri')) ;
                }
            })
            .fail (function (error) {
	            console.error (error) ;
            }) ;
        }

        // http://viewer.autodesk.io/node/gallery/#/viewer?id=564075fc5305b5ac0e3bd4c3
        // http://viewer.autodesk.io/node/gallery/uploads/extensions/Autodesk.ADN.Viewing.Extension.DockingPanel/Autodesk.ADN.Viewing.Extension.DockingPanel.js
        var Panel =function (parentContainer, id, title) {
            var _thisPanel =this ;
            _thisPanel._controls ={} ;

            _thisPanel.content =$(document.createElement ('div')) ;
            $(_thisPanel.content).prop ('id', id + 'PanelContentId') ;
            Autodesk.Viewing.UI.DockingPanel.call (this, parentContainer, id, title, { shadow: true }) ;
            $(_thisPanel.container).addClass ('docking-panel') ;
            $(_thisPanel.container).css ('resize', 'auto') ;
            //var html =[] ;
            //$(_thisPanel.container).append (html.join ('\n')) ;

            _thisPanel.setVisible =function (show) {
                Autodesk.Viewing.UI.DockingPanel.prototype.setVisible.call (this, show) ;
            } ;

            _thisPanel.toggleVisibility =function (evt) {
                var show =!Autodesk.Viewing.UI.DockingPanel.prototype.isVisible.call (this) ;
                Autodesk.Viewing.UI.DockingPanel.prototype.setVisible.call (this, show) ;
            } ;

            _thisPanel.initialize =function () {
                this.title =this.createTitleBar (this.titleLabel || this.container.id) ;
                this.closer =this.createCloseButton () ;
                this.container.appendChild (this.title) ;
                this.title.appendChild (this.closer) ;
                this.container.appendChild (this.content) ;
                this.initializeMoveHandlers (this.title) ;
                this.initializeCloseHandler (this.closer) ;
            } ;

            _thisPanel.addControl =function (ctrl) {
                _thisPanel._controls [ctrl._id] =ctrl ;
                $(ctrl.container).appendTo ($(this.container))
            } ;

            _thisPanel.addHtmlElement =function (elt) {
                $(elt).appendTo ($(this.container))
            } ;

            var _isMinimized =false ;
            _thisPanel.onTitleDoubleClick =function (evt) {
                _isMinimized =!_isMinimized ;
                if ( _isMinimized )
                    $(_thisPanel.container).addClass ('docking-panel-minimized') ;
                else
                    $(_thisPanel.container).removeClass ('docking-panel-minimized') ;
            } ;

        } ;

        Panel.prototype =Object.create (Autodesk.Viewing.UI.DockingPanel.prototype) ;
        Panel.prototype.constructor =Panel ;

    </script>
</head>

<body data-spy="scroll" data-target="#nav-parent" class="fuelux">

    <!-- NAVBAR -->
    <div class="bs-docs-section clearfix" id="navbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="bs-component">
                    <div class="navbar navbar-default app-navbar">
                        <div class="container app-container">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="https://developer.autodesk.com/"><img width="160px;" src="/images/Autodesk_logo.png" style="padding: 20px;"></a>
                            </div>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="https://github.com/cyrillef/extract.autodesk.io">View on GitHub <i class="fa fa-github-alt fa-fw"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- HEADER -->
    <div class="clearfix">
        <div class="row fullscreen-scroller">
            <div class="col-lg-12 animation-container">
                <div class="output">
                    <script src="/js/fss.js"></script>
                    <script src="/js/background-animation.js"></script>
                </div>

                <div class="page-header content-header app-content-header api-detail-header view-and-data-api" id="title">
                    <div class="container app-container">
                        <div class="col-xs-12 col-sm-6 col-md-9 col-lg-9 app-title-container">
                            <h1 id="view-and-data-title"><a href="http://developer-autodesk.github.io/" target="_blank">Autodesk Developer</a></h1>
                            <h1 id="view-and-data-title">Autodesk Forge Viewer - Model Extractor</h1>
                        </div>
                        <!--<p>Embedding vibrant 3D graphics in a Web Browser,
                            Support for almost 100 formats,
                            fast streaming large 2D and 3D models </p>-->
                        <!--div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 app-button-container">
                            <p class="bs-component">
                                <a href="https://developer.autodesk.com/" class="btn app-btn app-btn-lg app-btn-primary create-app-btn pull-right">Create an App<span class="bg-icon size-21"><i class="icon ion-chevron-right"></i></span></a>
                            </p>
                        </div-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN CONTENT -->
    <!-- http://getbootstrap.com/examples/theme/ -->
    <div class="content-form app-content-form clearfix">
        <div class="container app-container">

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="page-header">
                        <div class="panel panel-default app-panel-default">
                            <div class="panel-body app-panel-body app-api-doc">
                                <div class="app-api-section">
                                    <div class="app-api-section-heading">
                                        <h2 class="app-api-section-title first-child">Preview your model</h2>
                                    </div>

                                    <div id="project"><div id="viewer" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

	            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-block">
		            <br />
		            <button id="help-information" type="button" class="btn btn-info center-block">Help</button>
		            <br />
		            <br />

	            </div>
            </div>
        </div>
    </div>

    <!-- FOOTER  -->
    <div class="clearfix">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-footer">
                    <div class="container app-container center-block" style="text-align: center;">
                        &#169; Copyright Autodesk. All rights reserved.
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Bootstrap's modal dialog-->
    <div id="LoadingError" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content panel-danger">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Loading Error</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap's modal dialog-->
    <div id="HelpMsg" class="modal fade modal-lg">
	    <div class="vertical-alignment-helper">
		    <div class="modal-dialog modal-lg vertical-align-center">
			    <div class="modal-content panel-info">
				    <div class="modal-header panel-heading">
					    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					    <h4 class="modal-title">How to download the bubbles?</h4>
				    </div>
				    <div class="modal-body">
					    <div id="usage">
						    <p>This sample is to demonstrate how to extract the viewables (aka 'bubbles') after translation
							    from the Autodesk server. It is possible for you to download each individual fragment
							    from the server using the RESTful API. This sample simply extracts all fragments and
							    create a zip file for you to download.</p>
						    <p>There is no guarantee your file will be kept on this sample forever. However, you got
							    full control on the time life of your design file and 'bubbles' on this server and
							    Autodesk server.</p>
						    <p>How to use the sample: (<a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#UseOfTheSample">more instructions</a>)
						    <ol>
							    <li>Upload one design file (and it dependencies) you want to process <br />
								    Files can be uploaded as a ZIP file or multiple files. The application will
								    assemble all files together automatically for you</li>
							    <li>If your model depends on multiple files, make sure to point to the master
								    file by assign the <span class="glyphicon glyphicon-home"> </span> icon to it</li>
							    <li>Launch the translation process by clicking on the 'Submit my project' button</li>
							    <li>... wait ...</li>
							    <li>View and verify the results</li>
							    <li>Request the extraction zip file</li>
							    <li>Optionally delete the project (this can be done at any time)</li>
						    </ol>
						    </p>
						    <p>After extraction:</p>
						    <ol>
							    <li>Unzip the file on your hardrive</li>
							    <li>If you have node.js and node.js http-server already installed on your computer,
								    launch the local viewer by running the index.bat (Windows) or ./index (OSX/Linux)</li>
							    <li>If you do not have have node.js http-server installed,
								    read instructions <a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#node">here</a></li>
							    <li>If you prefer using Python, Apache/PHP, or other WEB technologies,
								    read instructions <a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#others">here</a></li>
						    </ol>
						    <p>Reporting issues:</p>
						    <ol>
							    <li><a href="https://github.com/cyrillef/extract.autodesk.io/issues" target="GitHub">Report on GitHub</a></li>
							    <li><a href="mailto:forge.help@autodesk.com?Subject=extract.autodesk.io%20problem">Email us</a></li>
						    </ol>
					    </div>
				    </div>
				    <div class="modal-footer">
					    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				    </div>
			    </div>
		    </div>
	    </div>
    </div>

    <script>
        (function (i, s, o, g, r, a, m) { i ['GoogleAnalyticsObject']= r ; i [r] =i [r] || function () {
            (i [r].q= i [r].q || []).push (arguments) }, i [r].l =1 * new Date () ; a =s.createElement (o),
            m =s.getElementsByTagName (o) [0] ; a.async =1 ; a.src =g ; m.parentNode.insertBefore (a, m)
        }) (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga') ;
        ga ('create', 'UA-71558670-1', 'auto');
        ga ('send', 'pageview') ;
    </script>

</body>
</html>
